<template>
    <div class="mainDiv">
        <div class="dataDiv">
            <div class="leftDiv">
                <textarea v-model="leftData" class="content" placeholder="请输入内容"></textarea>
            </div>
            &nbsp;&nbsp;&nbsp;
            <div class="rightDiv">
                <textarea v-model="rightData" class="content" placeholder="请输入内容"></textarea>
            </div>
        </div>
        <div class="buttonDiv">
            <Button ghost @click="cleanData()">清空</Button>
            &nbsp;&nbsp;&nbsp;
            <Button ghost @click="leftMore()">左边多</Button>
            &nbsp;&nbsp;&nbsp;
            <Button ghost @click="rightMore()">右边多</Button>
            &nbsp;&nbsp;&nbsp;
            <Button ghost @click="theSame()">相同</Button>
            <!--&nbsp;&nbsp;&nbsp;-->
            <!--<Button ghost @click="removeSame()">左边去重</Button>-->
            <!--&nbsp;&nbsp;&nbsp;-->
            <!--<Button ghost @click="searchSame()">查找重复</Button>-->
            <!--&nbsp;&nbsp;&nbsp;-->
            <!--<Button ghost @click="removeEmptyLine()">去除空行</Button>-->
            <!--&nbsp;&nbsp;&nbsp;-->
            <!--<Button ghost @click="removeLineSpace()">去除前后空格</Button>-->
        </div>
        <div class="resultDiv">
            <textarea v-model="resultData" class="content" placeholder="展示结果"></textarea>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'LeftAndRightCompare',
    components: {},
    data () {
      return {
        leftData: '',
        rightData: '',
        resultData: ''
      }
    },
    created () {
      console.info('初始化')
    },
    methods: {
      leftMore () {
        console.info('leftMore')
        let tempResultArray = []
        this.resultData = ''
        let leftArray = this.leftData.split('\n')
        let rightArray = this.rightData.split('\n')
        console.info('leftArray', leftArray.length)
        console.info('rightArray', rightArray.length)
        for (let i = 0; i < leftArray.length; i++) {
          let leftOne = leftArray[i]
          if (rightArray.indexOf(leftOne) < 0) {
            tempResultArray.push(leftOne)
          }
        }
        console.info('tempResultArray', tempResultArray.length)
        for (let i = 0; i < tempResultArray.length; i++) {
          this.resultData += tempResultArray[i] + '\n'
        }
      },
      rightMore () {
        console.info('rightMore')
        let tempResultArray = []
        this.resultData = ''
        let leftArray = this.leftData.split('\n')
        let rightArray = this.rightData.split('\n')
        console.info('leftArray', leftArray.length)
        console.info('rightArray', rightArray.length)
        for (let i = 0; i < rightArray.length; i++) {
          let rightOne = rightArray[i]
          if (leftArray.indexOf(rightOne) < 0) {
            tempResultArray.push(rightOne)
          }
        }
        console.info('tempResultArray', tempResultArray.length)
        for (let i = 0; i < tempResultArray.length; i++) {
          this.resultData += tempResultArray[i] + '\n'
        }
      },
      theSame () {
        console.info('theSame')
        let tempResultArray = []
        this.resultData = ''
        let leftArray = this.leftData.split('\n')
        let rightArray = this.rightData.split('\n')
        console.info('leftArray', leftArray.length)
        console.info('rightArray', rightArray.length)
        for (let i = 0; i < leftArray.length; i++) {
          let leftOne = leftArray[i]
          if (rightArray.indexOf(leftOne) >= 0) {
            tempResultArray.push(leftOne)
          }
        }
        console.info('tempResultArray', tempResultArray.length)
        for (let i = 0; i < tempResultArray.length; i++) {
          this.resultData += tempResultArray[i] + '\n'
        }
      },
      // removeSame () {
      //   console.info('removeSame')
      //   this.resultData = ''
      //   let leftArray = this.leftData.split('\n')
      //   let lodash = require('lodash')
      //   let tempResultArray = lodash.uniqWith(leftArray, lodash.isEqual)
      //   for (let i = 0; i < tempResultArray.length; i++) {
      //     this.resultData += tempResultArray[i] + '\n'
      //   }
      // },
      // searchSame () {
      //   console.info('searchSame')
      //   let leftArray = this.leftData.split('\n')
      //   let leftArraySort = leftArray.sort()
      //   let tempArray = []
      //   for (let i = 0; i < leftArray.length; i++) {
      //     if (leftArraySort[i] === leftArraySort[i + 1]) {
      //       console.info('重复内容为', leftArraySort[i])
      //       let sameItem = {
      //         sameContent: leftArraySort[i],
      //         count: 2
      //       }
      //       let existSameItem = tempArray.filter(item => item.sameContent === leftArraySort[i])
      //       if (existSameItem.length > 0) {
      //         let count = existSameItem[0].count + 1
      //         existSameItem[0].count = count
      //         tempArray = tempArray.filter(item => item.sameContent !== leftArraySort[i])
      //         tempArray.push(existSameItem[0])
      //       } else {
      //         tempArray.push(sameItem)
      //       }
      //     }
      //     console.info('tempArray', tempArray)
      //   }
      //   this.resultData = ''
      //   for (let i = 0; i < tempArray.length; i++) {
      //     this.resultData += '重复项：' + tempArray[i].sameContent + '，数量：' + tempArray[i].count + '\n'
      //   }
      // },
      // removeEmptyLine () {
      //   console.info('removeEmptyLine')
      //   this.resultData = ''
      //   let leftArray = this.leftData.split('\n')
      //   let tempResultArray = []
      //   for (let i = 0; i < leftArray.length; i++) {
      //     if (leftArray[i]) {
      //       tempResultArray.push(leftArray[i])
      //     }
      //   }
      //   for (let i = 0; i < tempResultArray.length; i++) {
      //     this.resultData += tempResultArray[i] + '\n'
      //   }
      // },
      // removeLineSpace () {
      //   console.info('removeLineSpace')
      //   this.resultData = ''
      //   let leftArray = this.leftData.split('\n')
      //   let tempResultArray = []
      //   for (let i = 0; i < leftArray.length; i++) {
      //     if (leftArray[i]) {
      //       tempResultArray.push(leftArray[i].trim())
      //     }
      //   }
      //   for (let i = 0; i < tempResultArray.length; i++) {
      //     this.resultData += tempResultArray[i] + '\n'
      //   }
      // },
      cleanData () {
        console.info('cleanData')
        this.leftData = ''
        this.rightData = ''
        this.resultData = ''
      }
    }
  }
</script>

<style scoped>
    .mainDiv {
        width: 100%;
    }
    .dataDiv {
        display: flex;
        width: 90%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        height: 400px;
        overflow: auto;
    }
    .leftDiv {
        width: 50%;
    }
    .rightDiv {
        width: 50%;
    }
    .content {
        width: 100%;
        height: 390px;
    }
    .buttonDiv {
        text-align: center;
    }
    .resultDiv {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }
</style>
